<template>
  <div class="Site IndexBox">
    <div class="ScrollBox">
      <van-nav-bar
        :border="false"
        style="background: transparent;"
        :left-text="$t('line')"
        @click-left="$router.push('/line')"
        :right-text="$t('language')"
        @click-right="$router.push('/language')"
      >
        <template #title>
          <img :src="`./static/zxwlpic/logo-${$i18n.locale}.png`" style="height: 2.25rem">
        </template> 
      </van-nav-bar>
      <van-swipe :autoplay="3000" indicator-color="#888" style="height: 10rem">
        <van-swipe-item v-for="(item,index) in InitData.bannerList" :key="index">
          <img :src="item" width="100%">
        </van-swipe-item>
      </van-swipe>
      <van-cell class="Broadcast" :border="false">
        <template #icon>
          <van-icon name="volume" color="#fff" size="1.13rem" style="margin-right: 0.322rem" />
        </template>
        <van-swipe style="height: 3rem" :show-indicators="false" vertical :autoplay="3000">
          <van-swipe-item v-for="(item,index) in InitData.userviplist" :key="index" v-html="$t('home.broadcast',{member: item.username,vipname: item.child_vip_name, grade: item.name,currency:InitData.currency,reward:item.amount})"></van-swipe-item>
        </van-swipe>
      </van-cell>
      <van-grid class="Menu" direction="horizontal" :column-num="3" :border="false" gutter="4">
        <van-grid-item to="/vip">
          <template #icon>
           {{$t('home.menu[0]')}}
          </template>
          <template #text>
            <img :src="`./static/icon/nav1.png`" style="height: 1.13rem">
          </template>
        </van-grid-item>
        <van-grid-item @click="openVideo">
          <template #icon>
            {{$t('home.menu[1]')}}
          </template>
          <template #text>
            <img :src="`./static/icon/nav2.png`" style="height: 1.38rem">
          </template>
        </van-grid-item>
        <van-grid-item to="/user/promote">
          <template #icon>
            {{$t('home.menu[2]')}}
          </template>
          <template #text>
            <img :src="`./static/icon/nav3.png`" style="height: 1.38rem">
          </template>
        </van-grid-item>
      </van-grid>
      <router-link to="/user/promote">
        <img :src="`./static/zxwlpic/promote-${$i18n.locale}.png`" width="100%" style="display: block;margin: 0.32rem 0">
      </router-link>
      <van-cell class="Title" :title="$t('home.taskHall.title[0]')" :border="false" />  
      <van-grid class="TaskHall" :class="$i18n.locale" direction="horizontal" :column-num="2" :border="false" gutter="4">
        <van-grid-item v-for="(item,index) in InitData.taskclasslist" :key="item.group_id" @click="goTask(index,item.state)">
          <template #icon>
            <h4>{{item.h_group_name}}</h4>
            {{item.h_group_info}}
          </template>
          <template #text>
            <img :src="item.icon" style="width: 2.75rem">
          </template>
        </van-grid-item>
      </van-grid>
      <van-cell class="Title" :title="$t('home.taskHall.title[1]')" :border="false" />  
      <van-grid class="TaskHall" :class="$i18n.locale" direction="horizontal" :column-num="2" :border="false" gutter="5">
        <van-grid-item v-for="(item,index) in InitData.taskclasslist.filter(obj=>obj.is_f==1)" :key="item.group_id" @click="goPost(item.group_id)">
          <template #icon>
            <h4>{{item.h_group_name}}</h4>
            {{item.h_group_info}}
          </template>
          <template #text>
            <img :src="item.icon" style="width: 2.75rem">
          </template>
        </van-grid-item>
      </van-grid>
      <van-tabs class="MemberList" type="card" background="#0e1526" color="#151d31">
        <van-tab>
          <template #title>
            <van-icon :name="`./static/icon/tab1.png`" size="1.13rem" />{{$t('home.memberList.title')}} 
          </template>
          <van-swipe id="SwipeList1" style="height: 340px" height="68" vertical autoplay="3000" :show-indicators="false" :touchable="false">
            <van-swipe-item v-for="(item,index) in InitData.memberList" :key="index" :index="index">
              <van-cell
                class="topItem" 
                :icon="`./static/head/${item.header}`" 
                :title="$t('home.memberList.data[0]',{member: item.username})"
                :label="$t('home.memberList.data[1]',{num: item.number,currency:InitData.currency,profit:item.profit})"
                center
              >
              </van-cell>
            </van-swipe-item>
          </van-swipe>
        </van-tab>
        <van-tab>
          <template #title>
            <van-icon :name="`./static/icon/tab2.png`" size="1.13rem" />{{$t('home.businessList.title')}} 
          </template>
          <van-swipe id="SwipeList2" style="height: 340px" height="68" vertical autoplay="3000" :show-indicators="false" :touchable="false">
            <van-swipe-item v-for="(item,index) in InitData.businessList" :key="index" :index="index">
              <van-cell
                class="topItem" 
                :icon="`./static/head/${item.header}`" 
                :title="item.username"
                :label="$t('home.businessList.data[1]',{num: item.number})"
                center
              >
                <template slot="right-icon">
                  <span class="profit">
                    <img :src="`./static/icon/gold.png`" style="height: 1.13rem">
                    {{item.profit||'0.00'}}
                  </span>
                </template>
              </van-cell>
            </van-swipe-item>
          </van-swipe>
        </van-tab>
      </van-tabs>
    </div>
    <Footer />
    <van-popup v-model="showNotice" style="background: transparent;width: 80%;text-align: center" @closed="$parent.isNotice=true">
      <dl class="NoticePopup" v-if="InitData.noticelist&&InitData.noticelist.length" @click="$router.push(`/article/notice/${InitData.noticelist[0].id}`)">
        <dt>{{$t('home.noticeTitle')}}</dt>
        <dd v-html="InitData.noticelist[0].content"></dd>
      </dl>
      <a class="close" href="javascript:;" @click="showNotice=false"><van-icon name="clear" color="rgba(255,255,255,.8)" size="2.5rem" /></a>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Home',
  inject: ['reloadHtml'],
  components: {
    
  },
  props: [],
  
  data() {
    return {
      showNotice: false,
    }
  },
  
  computed: {

  },
  watch: {
    'InitData.noticelist'(data){
      if(!this.$parent.isNotice&&data.length) this.showNotice = true
    },
  },
  created() {
    
  },
  mounted() {
    if(this.InitData.memberList&&this.InitData.memberList.length){
      this.$nextTick(()=>{
        const data = $('#SwipeList1 .van-swipe-item').slice(0, 5)
        for (var i = 0; i < data.length; i++) {
          $('#SwipeList1').children().append($(data[i])[0].outerHTML)
        }
      })
    }
    if(this.InitData.businessList&&this.InitData.businessList.length){
      this.$nextTick(()=>{
        const data = $('#SwipeList2 .van-swipe-item').slice(0, 5)
        for (var i = 0; i < data.length; i++) {
          $('#SwipeList2').children().append($(data[i])[0].outerHTML)
        }
      })
    }
  },
  activated() {

  },
  destroyed() {
    
  },
  methods: {
    goTask(index,state) {
      if(state==3){
        this.$toast.fail(this.$t('home.msg'))
      }else{
        this.$router.push(`/task/${index}`)
      }
    },
    goPost(id) {
      this.$router.push({name: 'postTask', query:{type:id}})
    },
    goMiLiao() {
      this.$parent.showMiliao = true;
    },
    openVideo() {

        this.$router.push(`/article/video`)

    },
  }
}
</script>
<style scoped>
.Broadcast{
  background-color: #ffffff22;
  padding: 9px 10px;
  line-height: 16px;
  margin: 4px 0;
}
.Broadcast .van-swipe-item{
  color: #fff;
}
.TaskHall>>>.van-grid-item__content{
  background-color: #ffffff22;
  color: #fff;
  padding: 10px 22px;
  justify-content: flex-start;
  text-align: justify;
  border-radius: 5px;
}
.TaskHall>>>.van-grid-item__icon-wrapper{
  margin-right: 10px;
  flex: 1;
  text-align: left;
}
.zh-CN>>>.van-grid-item__icon-wrapper,.zh-HK>>>.van-grid-item__icon-wrapper{
  word-spacing: 5px;
}
.MemberList{
  overflow: hidden;
  margin-bottom: 5px;
}
.MemberList>>>.van-tabs__wrap{
  margin: 4px 0;
}
.MemberList>>>.van-tabs__nav--card{
  margin: 0;
}
.MemberList>>>.van-icon{
  margin-right: 10px;
}
.MemberList>>>.van-tab__text{
  color: #fff;
  display: flex;
  align-items: center;
}
.MemberList .van-swipe-item{
  padding: 1px 0;
}
.topItem {
  line-height: 1;
  background-color: #151d31;
  color: #fff;
}
.topItem .van-cell__left-icon{
  height: 46px;
  width: 46px;
  background-color: #fff;
  border-radius: 100%;
  overflow: hidden;
  padding: 2px;
}
.topItem .van-icon__image{
  width: 100%;
  height: 100%;
}
.topItem .van-cell__label{
  line-height: 1;
  margin-top: 5px;
  color: #bbb;
}
.topItem .profit{
  background-color: rgba(255, 255, 255, .5);
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 13px;
  color: #0e1526;
}
.topItem .profit img{
  margin-right: 5px;
}
.Menu{
  flex-wrap: nowrap;
}
.Menu>>>.van-grid-item__content{
  background-color: #ffffff22;
  color: #fff;
  border-radius: 5px;
}
.Menu>>>.van-grid-item__icon-wrapper{
  margin-right: 15px;
  overflow: hidden;
  flex: 1;
}
.Title{
  background-color: #ffffff22;
  color: #fff;
  margin: 4px 0;
  padding: 7px 25px;
}
</style>